<template>
<!-- 小型播放器样式 -->
  <div class="playBar" v-if="currentPlaySong" :class="{imgPlay:playing}">
      <div class="left" @click="$emit('update:isFullScreen',true)">
          <img 
          :src="
            currentPlaySong.picUrl || currentPlaySong.al.picUrl | imageView(40)
          "
          ref="picture"
          >
          <span>{{currentPlaySong.name}} - </span>
          <span
            v-for="(artist, index) in currentPlaySong.song
            ? currentPlaySong.song.artists
            : currentPlaySong.ar"
            :key="index"
            class="artist"
          >{{ artist.name }}</span
        >
      </div>
      <div class="right">
          
          <svg  class="playing"  v-if="!playing"  @click="startPlay" t="1636126170821"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4951" width="200" height="200">
            <path d="M780.8 475.733333L285.866667 168.533333c-27.733333-17.066667-64 4.266667-64 36.266667v614.4c0 32 36.266667 53.333333 64 36.266667l492.8-307.2c29.866667-14.933333 29.866667-57.6 2.133333-72.533334z" p-id="4952"></path>
          </svg>
        <div class="progress" v-else  @click="stopPlay">
          <svg  class="pauseing" t="1636125944637" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3480" width="200" height="200">
            <path d="M128 106.858667C128 94.976 137.621333 85.333333 149.12 85.333333h85.76c11.648 0 21.12 9.6 21.12 21.525334V917.12c0 11.882667-9.621333 21.525333-21.12 21.525333H149.12A21.290667 21.290667 0 0 1 128 917.141333V106.88z m640 0c0-11.882667 9.621333-21.525333 21.12-21.525334h85.76c11.648 0 21.12 9.6 21.12 21.525334V917.12c0 11.882667-9.621333 21.525333-21.12 21.525333h-85.76a21.290667 21.290667 0 0 1-21.12-21.525333V106.88z" fill="#3D3D3D" p-id="3481"></path>
          </svg>
          <canvas
            ref="canvas"
            width="36"
            height="36"
            style="display: block; width: 30px; height: 30px"
            >
            </canvas>  
        </div>

          <svg class="list" @click="$emit('list',true)" t="1636126374321" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8523" width="200" height="200">
            <path d="M352 224l-224 128V96l224 128zM128 768h768v64H128v-64z m0-288h768v64H128v-64z m352-288h416v64H480V192z" p-id="8524"></path>
          </svg>
      </div>
  </div>
</template>

<script>
export default {
    props: ["currentPlaySong","playing","currentTime","allTime"],
    data: function(){
        return{
            context: null,
        }
    },
    methods: {
        startPlay: function(){
            this.$parent.$refs.audio.play();

        },
        stopPlay: function(){
            this.$parent.$refs.audio.pause();
        }
    },
    mounted:  function(){
        if(this.$refs.canvas){
            this.context = this.$refs.canvas.getContext("2d");
        }
    },
    watch: {
        currentTime: function (n) {
        n;
        if(this.context){

            // this.$nextTick(() => {
                
                this.context.clearRect(0, 0, 36, 36);
    
                this.context.beginPath();
                this.context.arc(
                    18,
                    18,
                    17,
                    (Math.PI / 180) * 360 * (this.currentTime / this.allTime) - 90,
                    (Math.PI / 180) * 360
                );
                this.context.strokeStyle = "#ccc";
                this.context.stroke();
                this.context.closePath();
    
                this.context.beginPath();
                this.context.arc(
                    18,
                    18,
                    17,
                    (Math.PI / 180) * 0 - 90,
                    (Math.PI / 180) * 360 * (this.currentTime / this.allTime) - 90
                );
                this.context.strokeStyle = "black";
                this.context.stroke();
                
                //   });
            }
        },
  },
}
</script>

<style lang="less" scoped>
    .playBar{
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        width: 100%;
        border-top: 1px solid #e2e0e0;
        background-color: white;
        .left{
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            img{
                vertical-align: middle;
                border-radius: 50%;
            }
            span:first-of-type{
                margin-left: 10px;
            }
            span:last-of-type::before{
                content: " / ";
            }
            .artist{
                font-size: 12px;
            }
        }
        .right{
            display: flex;
            align-items: center;
            .progress{
                position: relative;
                .pauseing{
                    height: 18px;
                    width: 18px;
                    margin-right: 20px;
                    margin-top: 5px;
                }
                canvas{
                    position: absolute;
                    top: -1px;
                    left: -5px;
                    // z-index: -1;
                }
            }
           .playing{
               height: 25px;
               width: 25px;
               margin-right: 15px;
           }
           .list{
               height: 30px;
               width: 30px;
            }
        }
    }
    img{
        animation: rotate 5s linear infinite forwards;
        animation-play-state: paused;
    }
    .imgPlay{
        img{
            animation-play-state: running;
        }
    }
    @keyframes rotate {
        from{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(360deg);
        }
    }
</style>